<template>
  <!-- 边框、背景,有条件的让ui切一张 -->
  <div class="panel_box">
    <h2>
      {{ panelTitle }}
    </h2>
    <div class="panel_area">
      <slot></slot>
    </div>
    <div class="panel_footer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    panelTitle: {
      type: String,
      default: "panel标题",
    },
  },
};
</script>

<style lang="less" scoped>
.panel_box {
  margin-bottom: 10px;
  position: relative;
  height: 310px;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url("../../../assets/demo1/line.png") rgba(255, 255, 255, 0.03);

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: "";
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: "";
  }

  .panel_footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
      content: "";
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-bottom: 2px solid #02a6b5;
      content: "";
    }
  }

  > h2 {
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
  }

  .panel_area {
    height: 240px;
    // background-color: pink;
  }
}
</style>